<!-- saved from url=(0014)about:internet -->
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-language" content="ja"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="scripts/modernizr.custom.53451.js"></script>
	<script type="text/javascript" src="scripts/jquery.gallery.js"></script>

	<script type="text/javascript" src="scripts/main.js"></script>
	<link href="css/gallery.css" rel="stylesheet" type="text/css"/>
	<link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="page">
	<div class="header">
		<div style="height: 110px;">
			<div class="logo-head">COMPANY LOGO</div>
			<div class="logo-head-slogan"></div>
		</div>
		<div class="nav-bar">
			<div class="nav-item">
				<i class="icon ic-home"></i>Trang chủ
			</div>
			<div class="nav-item">
				<span><i class="icon ic-category"></i>Thể loại</span>

				<div class="nav-group">
					<div class="nav-sub-item">Lorem</div>
					<div class="nav-sub-item">Ipsum is</div>
					<div class="nav-sub-item">Sequitur</div>
				</div>
			</div>
			<div class="nav-item">
				<span><i class="icon ic-audio"></i>Audio book</span>

				<div class="nav-group">
					<div class="nav-sub-item">Mutationem</div>
					<div class="nav-sub-item">Consuetudium</div>
					<div class="nav-sub-item">Lectorum</div>
				</div>
			</div>
			<div class="nav-item"><i class="icon ic-account"></i>Tài khoản</div>
			<div id="btn-account" class="nav-item"><i class="icon ic-account"></i>Trợ giúp</div>
			<div class="nav-search">
				<input type="text" class="nav-search-input" placeholder="Input keyword"/>
				<a class="nav-search-btn">Tìm</a>
			</div>
		</div>
	</div>
	<div class="content">
		<div class="gallery">

			<section id="knw_continer" class="knw_continer">
				<div class="dg-wrapper">
					<a href="#"><img src="images/resources/img01.jpg" alt="image05"></a>
					<a href="#"><img src="images/resources/img02.jpg" alt="image06"></a>
					<a href="#"><img src="images/resources/img03.jpg" alt="image07"></a>
					<a href="#"><img src="images/resources/img04.jpg" alt="image07"></a>
					<a href="#"><img src="images/resources/img05.jpg" alt="image07"></a>
				</div>
				<nav>
					<span class="dg-prev">&lt;</span>
					<span class="dg-next">&gt;</span>
				</nav>
			</section>
		</div>
		<div class="list-view">
			<div class="pr-head"><span>Category Name</span></div>
			<ul class="pr-cata-list" id="list1">
				<li class="pr-cata-item">
					<div class="pr-cata-mask">
						<div class="pr-cata-img" style="background-image: url('images/resources/img01.jpg')"></div>
						<a class="pr-btn">Add</a>
					</div>
					<div class="pr-cata-info">
						<span class="pr-name">demonstraverunt dolor sit amet</span>
						<span class="pr-desc">legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consue</span>
						<span class="pr-price">21,000VND</span>
					</div>
				</li>
				<li class="pr-cata-item">
					<div class="pr-cata-mask">
						<div class="pr-cata-img" style="background-image: url('images/resources/img02.jpg')"></div>
						<a class="pr-btn">Add</a>
					</div>
					<div class="pr-cata-info">
						<span class="pr-name">Ipsum dolor sit amet</span>
						<span class="pr-desc">Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,</span>
						<span class="pr-price">100,000VND</span>
					</div>
				</li>
				<li class="pr-cata-item">
					<div class="pr-cata-mask">
						<div class="pr-cata-img" style="background-image: url('images/resources/img03.jpg')"></div>
						<a class="pr-btn">Add</a>
					</div>
					<div class="pr-cata-info">
						<span class="pr-name">dignissim qui blandit praesent</span>
						<span class="pr-desc">qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica,</span>
						<span class="pr-price">74,000VND</span>
					</div>
				</li>
				<li class="pr-cata-item">
					<div class="pr-cata-mask">
						<div class="pr-cata-img" style="background-image: url('images/resources/img01.jpg')"></div>
						<a class="pr-btn">Add</a>
					</div>
					<div class="pr-cata-info">
						<span class="pr-name">demonstraverunt dolor sit amet</span>
						<span class="pr-desc">legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consue</span>
						<span class="pr-price">35,000VND</span>
					</div>
				</li>
				<li class="pr-cata-item">
					<div class="pr-cata-mask">
						<div class="pr-cata-img" style="background-image: url('images/resources/img02.jpg')"></div>
						<a class="pr-btn">Add</a>
					</div>
					<div class="pr-cata-info">
						<span class="pr-name">Ipsum dolor sit amet</span>
						<span class="pr-desc">Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,</span>
						<span class="pr-price">220,000VND</span>
					</div>
				</li>
				<li class="pr-cata-item">
					<div class="pr-cata-mask">
						<div class="pr-cata-img" style="background-image: url('images/resources/img03.jpg')"></div>
						<a class="pr-btn">Add</a>
					</div>
					<div class="pr-cata-info">
						<span class="pr-name">dignissim qui blandit praesent</span>
						<span class="pr-desc">qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica,</span>
						<span class="pr-price">93,000VND</span>
					</div>
				</li>
				<li class="pr-cata-item">
					<div class="pr-cata-mask">
						<div class="pr-cata-img" style="background-image: url('images/resources/img04.jpg')"></div>
						<a class="pr-btn">Add</a>
					</div>
					<div class="pr-cata-info">
						<span class="pr-name">soluta nobis eleifend option congue</span>
						<span class="pr-desc">I legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</span>
						<span class="pr-price">63,000VND</span>
					</div>
				</li>
				<li class="pr-cata-item">
					<div class="pr-cata-mask">
						<div class="pr-cata-img" style="background-image: url('images/resources/img05.jpg')"></div>
						<a class="pr-btn">Add</a>
					</div>
					<div class="pr-cata-info">
						<span class="pr-name">Investigationes demonstraverunt</span>
						<span class="pr-desc">dolor sit amet, consectetunt ut laoreet dolore magna aliquam erat volutpat.</span>
						<span class="pr-price">53,000VND</span>
					</div>
				</li>
				<li class="pr-cata-item">
					<div class="pr-cata-mask">
						<div class="pr-cata-img" style="background-image: url('images/resources/img04.jpg')"></div>
						<a class="pr-btn">Add</a>
					</div>
					<div class="pr-cata-info">
						<span class="pr-name">consectetuer adipiscing</span>
						<span class="pr-desc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, nt ut laoreet dolore magna aliquam erat volutpat.</span>
						<span class="pr-price">40,000VND</span>
					</div>
				</li>
			</ul>
		</div>
		<div class="banner-view">
			<a class="banner-btn left"></a>
			<a class="banner-btn right"></a>
			<ul class="pr-list list-banner" id="list3">
				<li class="pr-item-banner" style="background-image: url('images/resources/img01.jpg')">
				</li>
				<li class="pr-item-banner" style="background-image: url('images/resources/img02.jpg')">
				</li>
				<li class="pr-item-banner" style="background-image: url('images/resources/img03.jpg')">
				</li>
				<li class="pr-item-banner" style="background-image: url('images/resources/img04.jpg')">
				</li>
				<li class="pr-item-banner" style="background-image: url('images/resources/img05.jpg')">
				</li>
				<li class="pr-item-banner" style="background-image: url('images/resources/img02.jpg')">
				</li>
			</ul>
		</div>
	</div>
	<div class="footer">
		<ul class="footer-nav">
			<li class="footer-nav-item"><i class="footer-nav-icon ic-account"></i><span>Tài khoản</span></li>
			<li class="footer-nav-item"><i class="footer-nav-icon ic-ship"></i><span>Đã mua</span></li>
			<li class="footer-nav-item"><i class="footer-nav-icon ic-pig"></i><span>Nạp tiền</span></li>
			<li class="footer-nav-item"><i class="footer-nav-icon ic-game"></i><span>Trò chơi</span></li>
		</ul>
		<div class="logo">COMPANY LOGO</div>
		<div class="footer-info">
			• Lorem ipsum dolor sit amet • Consectetuer adipiscing elit • Ntut laoreet dolore magna • Aliquam erat
			volutpat.
			<br/>
			• Dolor sit amet • Consectetunt • Laoreet dolore magna • Aliquam volutpat.
		</div>
	</div>
</div>
</body>
</html>